<?php include (TEMPLATEPATH . '/header2.php'); ?>

<script>
  var n = 0;
  function rebind(){
    $('body').on('mouseover', '#news .column', function(){
      grayscale.reset($(this));
    });
    
    $('body').on('mouseout', '#news .column', function(){
      grayscale($(this));
    });
  }
  
  $(document).ready(function(){
    $('#menu-news').addClass('active');

    var img = $('#news').imagesLoaded();
    img.always(function(){
      grayscale($('#news'));
      
      rebind();
    });
    
    $('#more_news').click(function(){
      n = n + 5;
      $.ajax({
        url:"<?php bloginfo('url') ?>/newsajax?offset="+n,
        success:function(results)
        {
          // console.log(results);
          grayscale.reset($('.column'));
          $('#news').append(results);
          grayscale($('.column'));
          
          // rebind();
        },
      });
    });
  });
</script>

<?php
  $args = array(
    'numberposts'     => 5,
    'category'        => 1,
  );
  
  $posts = get_posts($args);
  // print_r($posts);
?>

<div id="news" class="section">
	<?php if($posts){ ?>
  <div class="column full last">
    <?php $post = $posts[0]; ?>
    <a href="<?php the_permalink(); ?>">
      <div class="pic container">
        <?php
          $feat_image = wp_get_attachment_url( get_post_thumbnail_id($posts[0]->ID) );
        ?>
        <img src="<?php echo $feat_image ?>" />
      </div>
      <div class="description">
        <h3><?php echo $posts[0]->post_title ?></h3>
        <p><?php echo substr(strip_tags($posts[0]->post_content), 0, 50); ?></p>
      </div>
    </a>
  </div>
  <div class="column col1">
    <?php $post = $posts[1]; ?>
    <a href="<?php the_permalink(); ?>">
      <div class="description">
        <h3><?php echo $posts[1]->post_title ?></h3>
        <p><?php echo substr(strip_tags($posts[1]->post_content), 0, 50); ?></p>
      </div>
      <div class="pic container">
        <?php
          $feat_image = wp_get_attachment_url( get_post_thumbnail_id($posts[1]->ID) );
        ?>
        <img src="<?php echo $feat_image ?>" />
      </div>
    </a>
  </div>
  <div class="column col2 last">
    <?php $post = $posts[2]; ?>
    <a href="<?php the_permalink(); ?>">
      <div class="pic container">
        <?php
          $feat_image = wp_get_attachment_url( get_post_thumbnail_id($posts[2]->ID) );
        ?>
        <img src="<?php echo $feat_image ?>" />
      </div>
      <div class="description">
        <h3><?php echo $posts[2]->post_title ?></h3>
        <p><?php echo substr(strip_tags($posts[2]->post_content), 0, 50); ?></p>
      </div>
    </a>
  </div>
  <div class="column full last odd">
    <?php $post = $posts[3]; ?>
    <a href="<?php the_permalink(); ?>">
      <div class="description">
        <h3><?php echo $posts[3]->post_title ?></h3>
        <p><?php echo substr(strip_tags($posts[3]->post_content), 0, 50); ?></p>
      </div>
      <div class="pic container">
        <?php
          $feat_image = wp_get_attachment_url( get_post_thumbnail_id($posts[3]->ID) );
        ?>
        <img src="<?php echo $feat_image ?>" />
      </div>
    </a>
  </div>
  <div class="column full last even">
    <?php $post = $posts[4]; ?>
    <a href="<?php the_permalink(); ?>">
      <div class="pic container">
        <?php
          $feat_image = wp_get_attachment_url( get_post_thumbnail_id($posts[4]->ID) );
        ?>
        <img src="<?php echo $feat_image ?>" />
      </div>
      <div class="description">
        <h3><?php echo $posts[4]->post_title ?></h3>
        <p><?php echo substr(strip_tags($posts[4]->post_content), 0, 50); ?></p>
      </div>
    </a>
  </div>
  
	<?php } ?>
</div>

<?php if($posts){ ?>
<a href="javascript:void(0)" id="more_news">More News</a>
<?php } ?>

<?php get_footer(); ?>